﻿var webServiceURL = document.location.protocol + "//" + document.location.host + "/GetInfo.asmx/";
var jsonCT = "application/json; charset=utf-8";

var GetAllGallery = function () {
    $.ajax({
        type: "POST",
        url: webServiceURL + "GetAllGallery",
        contentType: jsonCT,
        dataType: "json",
        async: false,
        success: function (msg) { ShowListImgName(msg.d); },
        error: function () { alert("Not get gallery Info. Please check data!");}
    });
}

var ShowListImgName = function (listImgName) {
    if (listImgName.length > 0) {
        for (var img in listImgName) {
            CreateElementImgName(listImgName[img].Id, listImgName[img].Name);
        }

        ShowFirstImg(listImgName[0].Id, listImgName[0].LinkVideo);
    }
}

var CreateElementImgName = function (id, name) {
    var div_main = document.getElementById("list-path-video");

    var div = document.createElement("div");

    var a = document.createElement("a");
    a.innerHTML = name;
    a.id = "img-" + id;
    a.className = "link-video";
    a.onclick = function () {
        GetPathNameImgById(this,id)
    }

    div.appendChild(a);

    div_main.appendChild(div);
}

var GetPathNameImgById = function (element, id) {
    $.ajax({
        type: "POST",
        url: webServiceURL + "GetImgPathById",
        data: "{id: '" + id + "'}",
        contentType: jsonCT,
        dataType: "json",
        async: false,
        success: function (msg) { ShowImg(msg.d); HighlightElement(element);},
        error: function () { alert("Not get gallery Info. Please check data!"); }
    });
}

var HighlightElement = function (element) {
    var lstLinkVideo = $(".link-video");
    for (var i = 0; i < lstLinkVideo.length; i++) {
        $(lstLinkVideo[i]).removeClass("link-active");
        $(lstLinkVideo[i]).addClass("link-not-active");
    }

    element.className = "link-video link-active";
}

var ShowFirstImg = function (id, link) {
    ShowImg(link);

    var firstA = document.getElementById("img-" + id);
    firstA.className = "link-video link-active";
}

var ShowImg = function (link) {
    var div = document.getElementById("view-video");
    div.innerHTML = "";

    var iframe = document.createElement('iframe');
    iframe.frameBorder = 0;
    iframe.width = "100%";
    iframe.height = "100%";
    iframe.setAttribute("src", "//" + link);

    div.appendChild(iframe);
}

$(document).ready(function () {
     GetAllGallery();
});